<template>
  <div class="index">
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <shou-ye></shou-ye>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <pin-tuan></pin-tuan>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <gou-wu-che></gou-wu-che>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <wo-de></wo-de>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item :id="item.id" v-for="(item,index) in tabbarNav" :key="index">
        <img slot="icon" :src=" item.id === selected ? item.activeImgUrl:item.imgUrl">
        {{item.tabbarName}}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import shouYe from './index/ShouYe'
import pinTuan from './index/PinTuan'
import gouWuChe from './index/GouWuChe'
import woDe from './index/WoDe'
export default {
  data () {
    return {
      selected: '1',
      tabbarNav: [
        { id: '1', tabbarName: '首页', imgUrl: '//p12.jmstatic.com/mcms/89ea87200c623f4c7809f21f2ab4bce8.png', activeImgUrl: '//p12.jmstatic.com/mcms/5e9e00537e4a635e36e84db81f2cc17a.png' },
        { id: '2', tabbarName: '拼团', imgUrl: '//p12.jmstatic.com/mcms/b51a66ca3ddb31ec0edbd67ea68f7589.png', activeImgUrl: '//p12.jmstatic.com/mcms/562fb7b2ae7bf1cacdc8ed91493e53af.png' },
        { id: '3', tabbarName: '购物车', imgUrl: '//p12.jmstatic.com/mcms/77b9454e8dd41a060510a445010ac934.png', activeImgUrl: '//p12.jmstatic.com/mcms/35143fe7ab8afbaa41da2ea6e766d62b.png' },
        { id: '4', tabbarName: '我的', imgUrl: '//p12.jmstatic.com/mcms/829aa091062366a9f7b93cfffaa0e681.png', activeImgUrl: '//p12.jmstatic.com/mcms/482fb198341f583f92f1151eff6b99f0.png' }
      ]
    }
  },
  components:{
    shouYe,
    pinTuan,
    gouWuChe,
    woDe
  },
  methods: {
    example () {
      console.log('123')
    }
  }
}
</script>

<style lang="stylus" scoped>
.index
  width 100%
  height 100%
  .mint-tab-container
    margin-bottom 56px
  .mint-tabbar
    background-color #fff
    background-color rgb(255, 255, 255)
    border-top 1px solid rgb(238, 238, 238)
    z-index 17
    padding 0 20px
    .mint-tab-item
      &:active
        background-color #DEF8FE
    .is-selected
      background-color #fff
      color rgb(254, 64, 112)
</style>